<template>
  <div class="ii">
      <Top/>
      <dl class="ui-border">
          <dd>
              <div id="location">定位城市：获取失败，请手动选择</div>
          </dd>
      </dl>
      <dl id="center">
          <dt>热门城市</dt>
          <dd>
              <ul class="jj">
                  <li class="city" :data-name="v" v-for="(v,i) in arrzz" :key="i" @click="fun(v)">{{v}}</li>
              </ul>
          </dd>
      </dl>
      <dl id="center">
          <dt>全部城市</dt>
          <dd>
              <ul class="ui-table">
                  <li><a href="#A">A</a></li>
                  <li><a href="#B">B</a></li>
                  <li><a href="#C">C</a></li>
                  <li><a href="#D">D</a></li>
                  <li><a href="#E">E</a></li>
                  <li><a href="#F">F</a></li>
                  <li><a href="#G">G</a></li>
                  <li><a href="#H">H</a></li>
                  <li><a href="#I">I</a></li>
                  <li><a href="#J">J</a></li>
                  <li><a href="#K">K</a></li>
                  <li><a href="#L">L</a></li>
                  <li><a href="#M">M</a></li>
                  <li><a href="#N">N</a></li>
                  <li><a href="#O">O</a></li>
                  <li><a href="#P">P</a></li>
                  <li><a href="#Q">Q</a></li>
                  <li><a href="#R">R</a></li>
                  <li><a href="#S">S</a></li>
                  <li><a href="#T">T</a></li>
                  <li><a href="#U">U</a></li>
                  <li><a href="#V">V</a></li>
                  <li><a href="#W">W</a></li>
                  <li><a href="#X">X</a></li>
                  <li><a href="#Y">Y</a></li>
                  <li><a href="#Z">Z</a></li>
              </ul>
          </dd>
          <dd>
              <ul class="ui-table" id="A">
                  <h4>A</h4>
                  <li class="city" :data-name="v" v-for="(v,i) in arrA" :key="i" @click="fun(v)">{{v}}</li>
              </ul>
          </dd>
          <dd>
              <ul class="ui-table" id="B">
                  <h4>B</h4>
                  <li class="city" :data-name="v" v-for="(v,i) in arrB" :key="i" @click="fun(v)">{{v}}</li>
              </ul>
          </dd>
           <dd>
              <ul class="ui-table" id="C">
                  <h4>C</h4>
                  <li class="city" :data-name="v" v-for="(v,i) in arrC" :key="i" @click="fun(v)">{{v}}</li>
              </ul>
          </dd>
            <dd>
              <ul class="ui-table" id="D">
                  <h4>D</h4>
                  <li class="city" :data-name="v" v-for="(v,i) in arrD" :key="i" @click="fun(v)">{{v}}</li>
              </ul>
          </dd>
          <dd>
              <ul class="ui-table" id="E">
                  <h4>E</h4>
                  <li class="city" :data-name="v" v-for="(v,i) in arrE" :key="i" @click="fun(v)">{{v}}</li>
              </ul>
          </dd>
          <dd>
              <ul class="ui-table" id="F">
                  <h4>F</h4>
                  <li class="city" :data-name="v" v-for="(v,i) in arrF" :key="i" @click="fun(v)">{{v}}</li>
              </ul>
          </dd>
          <dd>
              <ul class="ui-table" id="G">
                  <h4>G</h4>
                  <li class="city" :data-name="v" v-for="(v,i) in arrG" :key="i" @click="fun(v)">{{v}}</li>
              </ul>
          </dd>
          <dd>
              <ul class="ui-table" id="H">
                  <h4>H</h4>
                  <li class="city" :data-name="v" v-for="(v,i) in arrH" :key="i" @click="fun(v)">{{v}}</li>
              </ul>
          </dd>
          <dd>
              <ul class="ui-table" id="J">
                  <h4>J</h4>
                  <li class="city" :data-name="v" v-for="(v,i) in arrG" :key="i" @click="fun(v)">{{v}}</li>
              </ul>
          </dd>
          <dd>
              <ul class="ui-table" id="K">
                  <h4>K</h4>
                  <li class="city" :data-name="v" v-for="(v,i) in arrK" :key="i" @click="fun(v)">{{v}}</li>
              </ul>
          </dd>
          <dd>
              <ul class="ui-table" id="L">
                  <h4>L</h4>
                  <li class="city" :data-name="v" v-for="(v,i) in arrL" :key="i" @click="fun(v)">{{v}}</li>
              </ul>
          </dd>
          <dd>
              <ul class="ui-table" id="M">
                  <h4>M</h4>
                  <li class="city" :data-name="v" v-for="(v,i) in arrM" :key="i" @click="fun(v)">{{v}}</li>
              </ul>
          </dd>
          <dd>
              <ul class="ui-table" id="N">
                  <h4>N</h4>
                  <li class="city" :data-name="v" v-for="(v,i) in arrN" :key="i" @click="fun(v)">{{v}}</li>
              </ul>
          </dd>
          <dd>
              <ul class="ui-table" id="P">
                  <h4>P</h4>
                  <li class="city" :data-name="v" v-for="(v,i) in arrP" :key="i" @click="fun(v)">{{v}}</li>
              </ul>
          </dd>
          <dd>
              <ul class="ui-table" id="Q">
                  <h4>Q</h4>
                  <li class="city" :data-name="v" v-for="(v,i) in arrQ" :key="i" @click="fun(v)">{{v}}</li>
              </ul>
          </dd>
          <dd>
              <ul class="ui-table" id="R">
                  <h4>R</h4>
                  <li class="city" :data-name="v" v-for="(v,i) in arrR" :key="i" @click="fun(v)">{{v}}</li>
              </ul>
          </dd>
          <dd>
              <ul class="ui-table" id="S">
                  <h4>S</h4>
                  <li class="city" :data-name="v" v-for="(v,i) in arrS" :key="i" @click="fun(v)">{{v}}</li>
              </ul>
          </dd>
          <dd>
              <ul class="ui-table" id="T">
                  <h4>T</h4>
                  <li class="city" :data-name="v" v-for="(v,i) in arrT" :key="i" @click="fun(v)">{{v}}</li>
              </ul>
          </dd>
          <dd>
              <ul class="ui-table" id="W">
                  <h4>W</h4>
                  <li class="city" :data-name="v" v-for="(v,i) in arrW" :key="i" @click="fun(v)">{{v}}</li>
              </ul>
          </dd>
          <dd>
              <ul class="ui-table" id="X">
                  <h4>X</h4>
                  <li class="city" :data-name="v" v-for="(v,i) in arrX" :key="i" @click="fun(v)">{{v}}</li>
              </ul>
          </dd>
           <dd>
              <ul class="ui-table" id="Y">
                  <h4>Y</h4>
                  <li class="city" :data-name="v" v-for="(v,i) in arrY" :key="i" @click="fun(v)">{{v}}</li>
              </ul>
          </dd>
          <dd>
              <ul class="ui-table" id="Z">
                  <h4>Z</h4>
                  <li class="city" :data-name="v" v-for="(v,i) in arrZ" :key="i" @click="fun(v)">{{v}}</li>
              </ul>
          </dd>
      </dl>

  </div>
</template>

<script>
import Top from "@/components/cakeC/citytop.vue"
export default {
    data(){
        return{
            arrA:[
                "阿坝","阿拉善","阿里","安康","安庆","鞍山","安顺","安阳","澳门"
            ],
            arrB:[
                "北京","白银","保定","宝鸡","保山","包头","巴中","北海","蚌埠","本溪","毕节","滨州","百色","亳州"
            ],
            arrC:[
                "重庆","成都","长沙","长春","沧州","常德","昌都","长治","常州","巢湖","潮州","承德", "郴州","赤峰","池州","崇左","楚雄","滁州","朝阳"
            ],
            arrD:[
                "大连","东莞","大理","丹东","大庆","大同","大兴安岭","德宏","德阳","德州","定西","迪庆","东营"
            ],
            arrE:[
                "鄂尔多斯","恩施","鄂州"
            ],
            arrF:[
                "福州","防城港","佛山","抚顺","抚州","阜新","阜阳"
            ],
            arrG:[
                "广州","桂林","贵阳","甘南","赣州","甘孜","广安","广元","贵港","果洛"
            ],
            arrH:[
                "杭州","哈尔滨","合肥","海口","呼和浩特","海北","海东","海南","海西","邯郸","汉中","鹤壁","河池","鹤岗","黑河","衡水","衡阳","河源","贺州","红河","淮安","淮北","怀化","淮南","黄冈","黄南","黄山","黄石","惠州","葫芦岛","呼伦贝尔","湖州","菏泽"
            ],
            arrJ:[
                "济南","佳木斯","吉安","江门","焦作","嘉兴","嘉峪关","揭阳","吉林","金昌","晋城","景德镇","荆门","荆州","金华","济宁","晋中","锦州","九江",
            "酒泉"
            ],
            arrK:[
                "昆明","开封"
            ],
            arrL:[
                "兰州","拉萨","来宾","莱芜","廊坊","乐山","凉山","连云港","聊城","辽阳","辽源","丽江","临沧","临汾","临夏","临沂","林芝","丽水","六安","六盘水",
            "柳州","陇南","龙岩","娄底","漯河","洛阳","泸州","吕梁"
            ],
            arrM:[
                "马鞍山","茂名","眉山","梅州","绵阳","牡丹江"
            ],
            arrN:[
                "南京","南昌","南宁","宁波","南充","南平","南通","南阳","那曲","内江", "宁德","怒江"
            ],
            arrP:[
                "盘锦","攀枝花","平顶山","平凉","萍乡","莆田","濮阳"
            ],
            arrQ:[
                "青岛","黔东南","黔南","黔西南","庆阳","清远","秦皇岛","钦州","齐齐哈尔","泉州","曲靖","衢州"
            ],
            arrR:[
                "日喀则","日照"
            ],
            arrS:[
                "上海","深圳","苏州","沈阳","石家庄","三门峡","三明","三亚","商洛","商丘","上饶","山南","汕头","汕尾","韶关","绍兴","邵阳","十堰","朔州","四平","绥化","遂宁","随州","宿迁","宿州"
            ],
            arrT:[
                "天津","太原","泰安","泰州","台州","唐山","天水","铁岭","铜川","通化","通辽","铜陵","铜仁","台湾"
            ],
            arrW:[
                "武汉","乌鲁木齐","无锡","威海","潍坊","文山","温州","乌海","芜湖","乌兰察布","武威","梧州"
            ],
            arrX:[
                "厦门","西安","西宁","襄樊","湘潭","湘西","咸宁","咸阳","孝感","邢台","新乡","信阳","新余","忻州","西双版纳","宣城","许昌","徐州","香港","锡林郭勒","兴安"
            ],
            arrY:[
                "银川","雅安","延安","延边","盐城","阳江","阳泉","扬州","烟台","宜宾","宜昌","宜春","营口","益阳","永州","岳阳","榆林","运城","云浮","玉树","玉溪","玉林"
            ],
            arrZ:[
                "杂多县","赞皇县","枣强县","枣阳市","枣庄","泽库县","增城市","曾都区","泽普县","泽州县","札达县","扎赉特旗","扎兰屯市","扎鲁特旗","扎囊县","张北县","张店区","章贡区","张家港","张家界","张家口","漳平市","漳浦县","章丘市","樟树市","张湾区","彰武县","漳县","张掖","漳州","长子县","湛河区","湛江","站前区","沾益县","诏安县","召陵区","昭平县","肇庆","昭通","赵县","昭阳区","招远市","肇源县","肇州县","柞水县","柘城县","浙江","镇安县","振安区","镇巴县","正安县","正定县","正定新区","正蓝旗","正宁县","蒸湘区","正镶白旗","正阳县","郑州","镇海区","镇江","浈江区","镇康县","镇赉县","镇平县","振兴区","镇雄县","镇原县","志丹县","治多县","芝罘区","枝江市","芷江侗族自治县","织金县","中方县","中江县","钟楼区","中牟县","中宁县","中山","中山区","钟山区","钟山县","中卫","钟祥市","中阳县","中原区","周村区","周口","周宁县","舟曲县","舟山","周至县","庄河市","诸城市","珠海","珠晖区","诸暨市","驻马店","准格尔旗","涿鹿县","卓尼","涿州市","卓资县","珠山区","竹山县","竹溪县","株洲","株洲县","淄博","子长县","淄川区","自贡","秭归县","紫金县","自流井区","资溪县","资兴市","资阳"
            ],
            arrzz:[
                "北京","上海","武汉","深圳","成都","广州","杭州","重庆","西安","天津","长沙","南京","郑州","哈尔滨","苏州"
            ]
        }
    },
    methods:{
        fun(v){
            console.log(v)
           this.$router.push("/xsqg"+v)
        },
        // fun2(dataname){
        //     console.log(dataname)
        //     this.$router.push("/xsqg/"+dataname)
        // }
    
    },
    components:{
        Top
    }
}
</script>

<style scoped>
a{
    color: black;
}

.ii{
    font-size: 0.14rem;
    text-align: left;
    background-color:#f3f3f3;
    position: relative;
    width: 100%;
}
/* .jj{
    position: absolute;
    left: 0;
} */
dd{
    margin-left: 0rem;
}
dd ul{
    float: left;
    /* padding: 0.1rem; */
}
.jj li{
    border-right: 1px #f3f3f3 solid;
    border-bottom: 1px #f3f3f3 solid;
    display: inline-block;
    width: 25%;
    height: 0.5rem;
    line-height: 0.5rem;
    font-size: 0.14rem;
    text-align: center;
    box-sizing: border-box;
    float: left;
    position: relative;
    color: rgba(0,0,0,.64);
    z-index: 10;
    text-overflow: ellipsis;
    overflow: hidden;
}
.ui-border{
    text-align: left;
    margin-bottom: 0.15rem;
    overflow: hidden;
    background-color: white;
}
ul{
    width: 3.752rem;
}
#location{
    padding: 0.2rem 0.12rem;
    font-size: 0.15rem;
    background-color: #fff;
    text-align:left
}
#center{
    margin-bottom: 0.15rem;
    overflow: hidden;
    width: 100%;
    background-color: white;
}
dl dt{
    margin-bottom: 1px;
    background-color: #fff;
    overflow: hidden;
}
#center li{
    border-right: 1px #f3f3f3 solid;
    border-bottom: 1px #f3f3f3 solid;
    display: inline-block;
    width: 25%;
    height: 0.5rem;
    line-height: 0.5rem;
    font-size: 0.14rem;
    text-align: center;
    box-sizing: border-box;
    float: left;
    position: relative;
    color: rgba(0,0,0,.64);
    z-index: 10;
    text-overflow: ellipsis;
    overflow: hidden;
}
.ui-table{
    min-height: 0.5rem;
    position: relative;
    overflow: hidden;
    z-index: 0;
    padding: 0;
}
h4{
    border-right: 1px #f3f3f3 solid;
    border-bottom: 1px #f3f3f3 solid;
    margin-top: 0rem;
    margin-bottom: 0rem;
}
.ui-table h4{
    display: inline-block;
    width: 25%;
    height: 0.5rem;
    line-height: 0.5rem;
    font-size: 0.6rem;
     height: 0.99rem;
    text-align: center;
     line-height: 0.99rem;
    box-sizing: border-box;
    float: left;
    font-weight:500;
    position: relative;
    color:#b7b7b7;
    z-index: 10;
    text-overflow: ellipsis;
    overflow: hidden;
}
</style>